<template>
  <div class="common-layout" v-for="item in commodities" :key="item">
    <el-container >
      <!--  左右结构-->
        <el-aside>
          <div class="swiper-image">
            <img :src="item.cover">
          </div>
        </el-aside>
        <el-main>
          <div class="content">
            <span>{{item.name}}</span>
            <div class="content-price">
              <div class="price">￥ {{item.price}}</div>
              <div class="inventory">库存剩余：{{item.inventory}}</div>
              <div class="sales">总销量：{{item.sales}}</div>
            </div>
            <table class="goods-meta">
              <tbody>
              <tr class="first-child">
                <td class="goods-meta-name">运费：</td>
                <td>免运费</td>
              </tr>
              </tbody>
            </table>
<!--            数量计数器 最大值得与库存量匹配-->
            <div class="inputNumber">
              <div class="input-num">
                数量
              </div>
              <el-input-number
                v-model="num"
                :min="1"
                label="购买数量"></el-input-number>
            </div>

<!--            购买按钮-->
            <div class="buy-btn">
              <div v-if="item.inventory === 0">
                <el-button type="info">无法购买</el-button>
              </div>
              <div v-else>
                <el-button size="medium" class="btn" @click="buy(item.id)">
                  立即购买
                </el-button>
              </div>
              <a class="btn-share" href="javascript:">收藏店铺</a>
            </div>

            <div class="promise">
              <dl>
                <dt>承诺</dt>
                <dd>
                  <a title="满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费。">
                    <img src="https://img.alicdn.com/tps/i1/T1EQA5FpVgXXceOP_X-16-16.jpg">
                    7天无理由退款
                  </a>
                </dd>
              </dl>
            </div>
          </div>
        </el-main>

    </el-container>
    <h2 class="title">商品详情</h2>
    <!--  商品详情:图片+详情介绍-->
    <div style="display: flex;width: 100%;flex-wrap: wrap;">
      <div class="detail" v-for="i in item.description.split(';')" :key="i">
        <div style="height: 30px;width: calc(30vw)"> {{i}} </div>

      </div>
    </div>

    <div class="discussionBoard" style="width: 100%;height: auto;display: flex;justify-content: center;">
      <discussion-board :currentPosition="curAAa"></discussion-board>
    </div>

    <el-dialog title="订单信息" v-model="dialogFormVisible" width="30%">
      <el-form :model="orderForm" label-width="100px" ref="ruleForm" :rules="rules">
<!--        弹出一个确认框 里面提示 产品名称 购买数量 产品单价 产品总价 用户名 用户手机号 发货地址 收货地址,点击确认,进行购买;点击取消,取消购买-->
        <el-form-item label="产品名称" prop="productName">
          <el-input disabled v-model="orderForm.productName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品单价" prop="price">
          <el-input disabled v-model="orderForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="购买数量" prop="number">
          <el-input disabled v-model="orderForm.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品总价" prop="totalPrice">
          <el-input disabled v-model="orderForm.totalPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="userName">
          <el-input disabled v-model="orderForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户手机号" prop="userPhone">
          <el-input disabled v-model="orderForm.userPhone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="发货地址" prop="shipAddress">
          <el-input disabled v-model="orderForm.shipAddress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="收货地址" prop="deliveryAddress">
          <el-input v-model="orderForm.deliveryAddress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Check">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import DiscussionBoard from "@/components/DiscussionBoard"
import request from "../../../../front_admin/src/utils/request";
import Cookies from "js-cookie";
export default {
  name:'ProductsDetail',
  components: {DiscussionBoard},
  data(){
    return{
      curAAa:{
        discussionType:0,
        positionId:0
      },
      commodities:[],
      num:1,
      orderForm:{},
      user:{},
      dialogFormVisible:false,
      DiscussionBoard,
      currentPosition:{//讨论板所在位置
        discussionType:1,
        positionId:8,
      }
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      const id = this.$route.query.id

      request.get("/products/"+ id).then(res => {
        if(res.code === '200') {
          //push 将对象放入数组
          // console.log("res.data",res.data)
          this.commodities=[res.data]
          this.curAAa.positionId=id, //产品ID
          this.curAAa.discussionType=1
        }
      })
    },
    // 弹出一个确认框 里面提示 产品名称 购买数量 产品单价 产品总价
    getProducts(id){
      request.get('/products/'+id).then(res => {
        // console.log("res.data内容是",res.data)
        this.orderForm.productName = res.data.name
        if(this.num>res.data.inventory){
          this.$notify.error('购买数量超过库存,最多购买库存数量')
          this.orderForm.number = res.data.inventory
        }else{
          this.orderForm.number = this.num
        }
         //购买数量

        this.orderForm.price = res.data.price
        this.orderForm.totalPrice = res.data.price * this.orderForm.number
      })
    },
    //用户名 用户手机号 发货地址 收货地址,点击确认,进行购买;点击取消,取消购买
    getUser(){
      this.user= JSON.parse(Cookies.get("user"));
      // console.log("user内容是",this.user)
      this.orderForm.userName = this.user.userName
      this.orderForm.userPhone = this.user.phone
      this.orderForm.deliveryAddress = this.user.address
      this.orderForm.shipAddress = "银川市拱墅区小河路334号"
    },
    buy(id){
      //传入该项目的id 用户id
      // console.log("进入到这里",id)
      this.getProducts(id)
      this.getUser()
      this.dialogFormVisible = true
    },
    Check(){
      this.$refs['ruleForm'][0].validate((valid) => {
        if (valid) {
          request.post('/order/save',this.orderForm).then(res => {
            if (res.code === '200'){
              this.$notify.success('购买成功')
              // this.sales(this.orderForm.number)
              //  新增成功后resetFields清空输入框内数据
              this.$refs['ruleForm'][0].resetFields();
              this.dialogFormVisible = false
              this.load()//月销量无法自动更新
            } else{
              this.$notify.error(res.msg)
            }
          })
        }
      })


    }
  }
}


</script>

<style scoped lang="less">
.el-container{
  width:80%;
  margin:15px auto;
}
.detail{
  display: flex;
  flex-wrap: wrap;
}
.title{
  width:80%;
  margin:15px auto;
  font-size: 22px;
  color: #333;
  background-color: #f8f8f8;
  border-top: 1px solid #e6e6e6;
  padding: 12px 15px;
}
.el-aside{
  width:35%;
}
.el-main{
  //background-color:#d9ecff;
  height: 550px;
  display: flex;
  .content{
    margin-left:30px ;
    span{
      font-weight: 700;
      font-size: 32px;
      line-height: 1.5;
      margin: 45px 0;
    }
    .content-price{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price{
        color: #f60;
        font-size: 30px;
        margin:45px 0;
        text-align: left;
      }
      .inventory{
        color: #6C6C6C;
        font-size: 18px;
      }
      .sales{
        color: #6C6C6C;
        font-size: 18px;
      }
    }
    .goods-meta{
      width:200px;
      font-size: 12px;
      padding: 10px;
      margin-bottom: 45px;
      background-color: #f8f8f8;
      .first-child{
        .goods-meta-name{
          text-align: left;
        }
        padding:16px 0;
        td{
          font-size: 20px;
        }
      }
    }
    .inputNumber{
      display: flex;
      align-items: center;
      .input-num{
        color:#6c6c6c;
        margin-right: 15px;
      }
    }
    .buy-btn{
      display: flex;
      margin-top: 45px;
      .el-button{
        height:50px;
        width: 130px;
      }
      .btn{
        font-size: 18px;
        color: #fff;
        background-color: rgb(244,164,96);
        border-color: rgb(244,164,96);
      }
      .btn-share{
        position: relative;
        margin-left: 10px;
        background-color: #f8f8f8;
        color: #666;
        height: 50px;
        width:130px;
        line-height: 46px;
        text-align: center;
        justify-content: center;
        font-size: 18px;

      }
      .btn-share::after {
        content: url("../../assets/img/buy_qrcode.png");
        position: absolute;
        right: -28px;
        top: -135px;
        z-index: 99;
        width:120px;
        height: 120px;
        border-radius: 4px;
        transform-origin: top right;
        transform: scale(0);
        opacity: 0;
        -webkit-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
      }
      .btn-share:hover::after{
        transform:scale(1);
        opacity: 1;
      }
    }
    .promise{
      display: flex;
      margin-top: 45px;

      dl{
        width: 500px;
        dt{
          float: left;
          //width: 33px;
          height: 22px;
          line-height: 22px;
          color: #6C6C6C;
        }
        dd a{
          margin-bottom: 15px;
          margin-left: -130px;
          height: 22px;
          line-height: 22px;
          color: #6C6C6C;
        }
      }
    }
  }
}
.swiper-image{
  img{
  //  自适应宽度
    width: 100%;
    height: 100%;
  }
}

.dialog-footer {
  margin-right: 20px;
}
</style>